<template>
    <el-form-item label="" prop="title">
        <div class="flexbox flexcenter">
            <el-popover placement="bottom" width="460" trigger="click">
                <div class="yusuan_num">创意分类：{{createform.industry_list.length}} /10</div>
                <div class="yusuan_list">
                    <div class="yusuan_item flexbox flexcenter flexbetween" @click="seletIndustry(item,index)" :class="{'active':index==createform.industry_active}" v-for="(item,index) in createform.industry_list" :key="index">
                        <img src="../../../assets/img/market_checked.svg" alt="" class="ys_check">
                        <el-input v-model="item.model_name" placeholder="请输入内容" size="small" class="ys_input" @input="changePlanKey(5,item.model_name)"></el-input>
                        <div class="yusuan_edit flexbox flexcenter">
                            <el-tooltip content="存为模板" placement="top">
                                <span class="icon_btn" @click.stop="saveModel(item,index,5)"><img src="../../../assets/img/ys_icon1.svg" alt=""></span>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <span class="icon_btn" @click.stop="deletIndustryClass(index)"><img src="../../../assets/img/ys_icon2.svg" alt=""></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="yusuan_btn flexbox flexbetween">
                    <el-button size="mini" style="width:222px" @click="addIndustryClass">添加创意分类</el-button>
                    <el-button size="mini" style="width:222px" @click="industryModel">选择模板</el-button>
                </div>
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <span class="select_text">{{createform.industryClass.model_name}}</span>
                    <span class="el-icon-caret-bottom"></span>
                </div>
            </el-popover>
            <div class="yusuan_num" style="font-size:14px;margin-left:16px">创意分类：{{createform.industry_list.length}} /10</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props:["createform"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        // 选择创意分类模板
        seletIndustry(val, index) {
            let that = this;
            let list = that.createform;
            this.isHotWordShow = false;
            if (list.industry_list.length == 1) {
                list.industry_active = index;
                list.industryClass = val;
            } else {
                this.industryCheck(list.industry_active, function () {
                    list.industry_list[list.industry_active] =
                        list.industryClass;
                    list.industry_active = index;
                    val.industryValue = val.industryValue.map(Number);
                    list.industryClass = val;
                    that.changePlanKey(5, val.model_name);
                });
            }
            this.sessionSave();
        },

        // 添加创意分类
        addIndustryClass() {
            let that = this;
            let list = that.createform;
            this.isHotWordShow = false;
            if (list.industry_list.length > 9) {
                return;
            } else {
                this.industryCheck(list.industry_active, function () {
                    let industry = {
                        model_name:
                            "创意分类" + (list.industry_list.length + 1),
                        industryValue: [],
                        ad_keywords: [],
                        first_industry_id: "",
                        second_industry_id: "",
                        third_industry_id: "",
                    };
                    list.industry_list.push(industry);
                    list.industry_active = list.industry_list.length - 1;
                    list.industryClass =
                        list.industry_list[list.industry_active];
                });
            }
            this.sessionSave();
        },

        // 创意分类校验
        industryCheck(index, callback) {
            let list = this.createform.industry_list;

            // if (list[index].industryValue.length == 0) {
            //     this.$message.error("请选择创意分类！");
            //     return;
            // }

            // if (list[index].ad_keywords.length == 0) {
            //     this.$message.error("请添加创意标签！");
            //     return;
            // }

            callback();
        },

        changePlanKey(index, name){
            this.$emit("changePlanKey",index,name)
        },

        saveModel(item, index, type){
            this.$emit("saveModel",item, index, type)
        },

        //删除创意分类
        deletIndustryClass(index) {
            let list = this.createform;
            this.isHotWordShow = false;
            if (this.createform.industry_list.length == 1) {
                return;
            } else {
                list.industry_list.splice(index, 1);
                list.industry_active = 0;
                list.industry_list[0].industryValue =
                    list.industry_list[0].industryValue.map(Number);
                list.industryClass = list.industry_list[0];
            }
            this.sessionSave();
        },

        // 添加创意分类模板
        industryModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("industryModel", attr);
        },

        sessionSave(){
            this.$emit("sessionSave")
        }
    },
    components: {},
};
</script>


<style scoped>
</style>

